<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>校车详情</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/bus_details.css">
</head>

<body>
	<div class="header">
		<div class="header_title">校车详情</div>
		<a onclick="history.back()">
			<img src="image/return.png" alt="" class="return">
		</a>
	</div>
	<div style="height: 40px;"></div>
	<div id="vue-root">

		<div class="bus">
			<span class="title">车牌号</span>
			<span class="number info" v-text="bus.plate"></span>
			<span class="title">车身颜色</span>
			<span class="number info" v-text="bus.color"></span>

			<span class="title">限载人数</span>
			<span class="number info" v-text="bus.maxLoad+'人'"></span>
			<span class="title">生产公司</span>
			<span class="number info" v-text="bus.producer"></span>

			<div style="margin-top: 20px;" v-if="trips.length>1">
				<select v-model="tripId">
					<option disabled="disabled" :value="null">请选择校车行进线路</option>
					<option v-for="trip in trips" :key="trip.id" :value="trip.id" v-text="trip.routeName"></option>
				</select>
			</div>

			<template v-if="tripId">

				<span class="title">行驶时间段</span>
				<span class="number info" v-text="period"></span>


				<template v-for="(teacher,index) in teachers" :key="index">
					<span class="title">随车老师</span>
					<span class="number info" v-text="teacher.name"></span>
					<span class="title" v-if="teacher.phone">手机号</span>
					<span class="number info" v-if="teacher.phone">
						<a :href="'tel:'+teacher.phone" v-text="teacher.phone"></a>
					</span>
				</template>

				<span class="title" v-if="isTeacher">学生名单</span>
				<span class="number info" v-if="isTeacher">点击展开
					<img class="open" src="image/open.svg" alt="展开" @click="showCode=1">
					<a :href="'teacher/bus_student_attendance.html?busId='+bus.id+'&tripId='+tripId">今日考勤详情</a>
				</span>

				<span class="title">行进线路</span>
				<span class="number info">点击展开
					<img class="open" src="image/open.svg" alt="展开" @click="showCode=2">
				</span>

			</template>

		</div>
		<div class="mask" v-if="showCode>0">
			<div class="students_list" v-if="showCode==1">
				<div class="list_title">
					<span>乘坐学生名单:</span>
					<img class="down" src="image/down.svg" alt="收起" @click="showCode=0">
				</div>
				<div class="students_name">
					<a v-for="student in students" :href="'bus_attendance.html?id='+student.id">
						<div class="staff-name" v-text="student.name"></div>
					</a>
				</div>

			</div>
			<div class="locus" v-if="showCode==2">
				<div class="list_title">
					<span>全程<span v-text="eval(durations.join('+'))"></span>分钟
						<span>·</span><span v-text="stops.length"></span>站</span>
					<a :href="'bus_locus_details.html?id='+bus.id+'&routeId='+routeId">在地图中查看</a>
					<a :href="'bus_trace.html?id='+bus.id">查看历史轨迹</a>
					<img class="down" src="image/down.svg" alt="收起" @click="showCode=0">
				</div>
				<div class="tips">
					<!-- <span>剩余<span>25</span>分钟<span>·</span><span>8</span>站<span>·</span></span> -->
					<!-- <div class="tips-bottom"><img src="image/bell.svg">送达提醒</div> -->
				</div>
				<div style="height: 75px;"></div>
				<div class="locu">

					<!-- <div class="sign over"></div>
					<div class="site site-over">护校通</div>
					<div class="line"></div>
					<div class="sign now"></div>
					<div class="site site-now">护校通
						<div id="site-now">55</div>
					</div>
					<div class="line"></div> -->

					<template v-for="(stop,index) in stops" :key="index">
						<div class="line" v-if="index!=0"></div>
						<div class="sign"></div>
						<div class="site" v-text="stop.name"></div>
					</template>
				</div>
			</div>
		</div>

	</div>


	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/js/common.js"></script>

	<script>

		var prefix = isTeacher() ? '/t' : '/s';
		var app = new Vue({
			el: '#vue-root',
			data: {
				bus: {},
				isTeacher: isTeacher(),
				teachers: [],
				students: [],
				showCode: 0,
				stops: [],
				durations: [],
				trips: [],
				tripId: null,
				period: null,
				routeId: null
			},
			created: function () {
				var id = params().id;
				axios.get(prefix + '/bus/' + id).then(function (res) {
					this.bus = res.data;
					axios.get(prefix + '/trip/all/' + id).then(function (res) {
						this.trips = res.data;
						if (this.trips.length > 0)
							this.tripId = this.trips[0].id;
					}.bind(this));
				}.bind(this));
			},
			methods: {

			},
			watch: {
				tripId: function (nv, ov) {
					this.trips.forEach(function (it) {
						if (it.id != nv) return;
						this.routeId = it.routeId;
						if (it.startTime && it.endTime)
							this.period = it.startTime + ' - ' + it.endTime;
						axios.get(prefix + '/route/' + it.routeId).then(function (res) {
							this.stops = res.data.stops;
							this.durations = res.data.durations;
						}.bind(this));
					}.bind(this));
					axios.get(prefix + '/trip/detail/' + nv).then(function (res) {
						this.teachers = res.data.teachers;
						this.students = res.data.students;
					}.bind(this));
				}
			}
		})
	</script>
</body>

</html>